{extend name="public/base" /}
{block name="css"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.css" /}
<style>
  .main-container {
    background: #F4F4F4;
    text-align: center;
  }

  .category {
    display: flex; justify-content: center; align-items: center; position: relative;
    color: #FFFFFF;
    width: 285px;
    height: 160px;
  }

  .category:nth-child(1) {
    background: url("https://res.bestyoujia.com/web/ZMYJ/baike/pc/fl1.png");
  }

  .category:nth-child(2) {
    background: url("https://res.bestyoujia.com/web/ZMYJ/baike/pc/fl2.png");
  }

  .category:nth-child(3) {
    background-image: url("https://res.bestyoujia.com/web/ZMYJ/baike/pc/fl3.png");
  }

  .category:nth-child(4) {
    background: url("https://res.bestyoujia.com/web/ZMYJ/baike/pc/fl4.png");
  }

  .active {
    pointer-events: none;
  }

  .active > .title-mask {
    display: flex;
    pointer-events: none;
    cursor: none;
  }

  .title-mask {
    width: 285px;
    height: 160px;
    background-color: #93412C !important;
    opacity: .5;
    border-radius: 20px;
    display: none; justify-content: center; align-items: center;
    pointer-events: none;
  }

  .title-mask > .title {
    position: absolute; font-size: 24px; font-weight: bold;
  }

  .category:hover {
    color: #DEAD75;
  }

  .category .title {
    /*width: 100%;*/
    /*background: rgba(28,40,87,.2);*/
    /*padding: 8px 0;*/
    position: absolute; font-size: 24px; font-weight: bold
  }

  .item {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background: #ffffff;
  }


  .item > .cover {
    width: 320px;
    height: 200px;
    flex: .35;
    min-width: 160px;
  }

  .item > .content {
    display: flex;
    flex: 1;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
  }

  .content > div > .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    text-align: left;
    letter-spacing: 2px;
  }

  .content > .summary {
    line-height: 30px;
  }

  .multi-3-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .pagination {
    margin: 0 auto !important;
  }

  .pagination>li>a, .pagination>li>span {
    border: 0 !important;
    color: #666666 !important;;
  }

  .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    cursor: default;
    background-color: #93412C;
    border-color:#93412C;
    color: #FFFFFF !important;font-size: 18px !important;
    padding: 6px 12px !important;
  }

  .pagination>li>a:hover, .pagination>li>span:hover {
    color: #93412C !important;
  }

  .pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #93412C;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 18px !important;
  }
</style>
{/block}
{block name="main"}
<section class="container-fluid main-container">
  <img alt class="img-fluid page-banner" src="https://res.bestyoujia.com/web/ZMYJ/baike/pc/banner.png"/>
  <div style="padding-bottom: 35px">
    <div class="mx-auto" style="max-width: 1200px;height: 60px;display: flex;align-items: center;">
      <a href="{$Request.root.true}" style="color: #999999">首页</a>
      <span
        style="color: #999999;margin: 0 6px 0 10px">/ </span>
      <a href="{$Request.root}/baike.html" style="color: #999999;margin: 0 0 0 0">软装百科</a>
      {switch category}
      {case rzdp}<span
        style="color: #999999;margin: 0 6px 0 10px">/</span>软装搭配{/case}
      {case qwdz}<span
        style="color: #999999;margin: 0 6px 0 10px">/</span>全屋定制{/case}
      {case jzgz}<span
        style="color: #999999;margin: 0 6px 0 10px">/</span>精装改造{/case}
      {case rzzs}<span
        style="color: #999999;margin: 0 6px 0 10px">/</span>软装知识{/case}
      {default /}
      {/switch}
    </div>
    <div class="mx-auto" style="max-width: 1200px;display: flex;align-items: center; overflow: hidden; justify-content: space-between">
      <a class="category {if $category == 'rzdp'}active{/if}" href="{$Request.root}/baike/rzdp.html">
        <div class="title-mask"></div>
        <span class="title">软装搭配</span>
      </a>
      <a class="category {if $category == 'qwdz'}active{/if}" href="{$Request.root}/baike/qwdz.html">
        <div class="title-mask"></div>
        <span class="title">全屋定制</span>
      </a>
      <a class="category {if $category == 'jzgz'}active{/if}" href="{$Request.root}/baike/jzgz.html">
        <div class="title-mask"></div>
        <span class="title">精装改造</span>
      </a>
      <a class="category {if $category == 'rzzs'}active{/if}" href="{$Request.root}/baike/rzzs.html">
        <div class="title-mask"></div>
        <span class="title">软装知识</span>
      </a>
    </div>
  </div>
  <div class="d-flex flex-column container-fluid" style="background:#FFFFFF;position: relative; align-items: center;margin-bottom: 50px">
    <div style="max-width: 1200px; width: 1200px;margin-top: 40px">
      {volist name="list" id="v"}
      <div class="item">
        <a href="{$Request.root}/baike/detail/{$v.id}.html" class="cover" style="background: url('{$v.cover}'); background-size: cover;">
          &nbsp;</a>
        <div class="content">
          <div style="display: flex;justify-content: space-between">
            <a href="{$Request.root}/baike/detail/{$v.id}.html" class="title">{$v.title}</a>
            <span style="color:#666666">时间：{$v.create_time|date='Y/m/d'}</span>
          </div>

          <div class="summary multi-3-text">
            {$v.summary}
          </div>
          <div class="footer" style="display: flex;justify-content: space-between;flex-direction: row;padding-bottom: 1px">
            <div>
              <div>
              {volist name="v.tag" id="tag"}
              <span style="background: #93412C;border-radius:12px;font-size: 14px;padding: 4px 10px;color: #FFFFFF;margin-right: 6px">{$tag}</span>
              {/volist}
              </div>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
              <div style="width: 24px; height: 16px; margin-right: 8px; background: url('https://res.bestyoujia.com/web/ZMYJ/baike/pc/view.png')"></div>
              <div>{$v.view_count}次</div>
            </div>
          </div>
        </div>
      </div>
      <hr style="margin: 30px 0">
      {/volist}
      <nav style="margin-top: 50px;text-align: center; display: flex;
    align-items: center;
    width: 100%;">
        {$page|raw}
      </nav>
    </div>

  </div>
</section>
{/block}
{block name="js"}
{load href="https://ujia-res.oss-cn-shenzhen.aliyuncs.com/common/third-party/swiper/5.0.3/dist/swiper.min.js" /}
{load href="https://res.bestyoujia.com/common/third/sticky.compile.js" /}
<script>
  $('.navbar-nav').children('li').eq(8).addClass('nav-active');

  const sticky = new Sticky('[data-sticky]');
</script>
{/block}